<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="code.google.com.analyticsbot.WaveDataProvider" %>
<%@ page import="code.google.com.analyticsbot.data.WaveData" %>
<%
	String waveId = request.getParameter("waveId");
	String waveletId = request.getParameter("waveletId");
	
	WaveDataProvider datap = new WaveDataProvider(waveId, waveletId, false);
	WaveData data = datap.getData();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Wave Insights</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="8">
<link rel="stylesheet" type="text/css" href="/resources/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="/resources/main.css" media="all" />
<script type="text/javascript" src="/resources/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/resources/main.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["columnchart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Hour');
    data.addColumn('number', 'Activities');
    data.addRows(12);
    data.setValue(0, 0, '0-2');
    data.setValue(0, 1, <%= data.getWaveActivityBetween(0,1) %>);
    data.setValue(1, 0, '2-4');
    data.setValue(1, 1, <%= data.getWaveActivityBetween(2,3) %>);
    data.setValue(2, 0, '4-6');
    data.setValue(2, 1, <%= data.getWaveActivityBetween(4,5) %>);
    data.setValue(3, 0, '6-8');
    data.setValue(3, 1, <%= data.getWaveActivityBetween(6,7) %>);
    data.setValue(4, 0, '8-10');
    data.setValue(4, 1, <%= data.getWaveActivityBetween(8,9) %>);
    data.setValue(5, 0, '10-12');
    data.setValue(5, 1, <%= data.getWaveActivityBetween(10,11) %>);
    data.setValue(6, 0, '12-14');
    data.setValue(6, 1, <%= data.getWaveActivityBetween(12,13) %>);
    data.setValue(7, 0, '14-16');
    data.setValue(7, 1, <%= data.getWaveActivityBetween(14,15) %>);
    data.setValue(8, 0, '16-18');
    data.setValue(8, 1, <%= data.getWaveActivityBetween(16,17) %>);
    data.setValue(9, 0, '18-20');
    data.setValue(9, 1, <%= data.getWaveActivityBetween(18,19) %>);
    data.setValue(10, 0, '20-22');
    data.setValue(10, 1, <%= data.getWaveActivityBetween(20,21) %>);
    data.setValue(11, 0, '22-24');
    data.setValue(11, 1, <%= data.getWaveActivityBetween(22,23) %>);

    var chart = new google.visualization.ColumnChart(document.getElementById('HotHours'));
    chart.draw(data, 
			{width: 380, 
			 height: 180, 
			 is3D: false, 
			 title: 'Activity throughout the day (GMT)', 
			 legend: 'none', 
			 colors:[{color:'9bbb59', darker:'680000'}]
		});
  }
</script>
</head>
<body>

<div id = "container">
	<div id = "header">Wave Insights</div>
	<div id="LeftBar">
		<!-- total number of blips -->
		<div id="TotalNumOfBlips"> 
			<div class="ValueExpressed"><%= data.getNumberOfBlipsCreated() %></div> blips 
			<!-- , Last 4 hours ago --> 
		</div>
		
		<!-- no. of users-->
		<div id="NumOfUsers_active">
			<div class="ValueExpressed"><%= data.getNumberOfParticipants() %></div> Users -- 
			<div class="ValueExpressed"><%= data.getActiveParticipantsPercentage() %>%</div> are active  
		</div>

		<!-- no. of deleted users-->
		<div id="NumOfLoggedOffUsers"> 
			<div class="ValueExpressed"><%= data.getNumberOfUsersThatLeft() %></div> Users left the wave
		</div>

		<!-- ratio of active users-->
		<div id = "MostActiveUsers">
			Most Active <div class="ValueExpressed"><%= data.getActiveUsersByRank(0, 0) %></div> 
			<div id = "clickForShow">(Who else ?)</div> 
			<div id="HiddenValue_Users"> 
				<div class="ValueExpressed">
					<%= data.getActiveUsersByRank(1, 3) %>
				</div>
			</div>	
		</div>
	</div>
	<div id="RightBar">
		<!-- hot hours -->
		<div id="HotHours"></div>
	</div>

	<!-- tag cloud bootom -->	
	<!-- div id="taglcoud"> 
		<div id="TagCloudReg">Holiday</div> 
		<div id="TagCloudSmall">Movies</div> 
		<div id="TagCloudLarge">Wave</div>
		<div id="TagCloudLarge">Twitter</div>
		<div id="TagCloudXLarge">Fun</div> 
		<div id="TagCloudSmall">Misha</div> 
	  	<div id="TagCloudReg">Calderon</div> 
	    <div id="TagCloudReg">Dana</div> 
	    <div id="TagCloudXLarge">Neviot</div>
	    <div id="TagCloudLarge">Laptop</div> 
	    <div id="TagCloudReg">MTA</div>	
		<div id="TagCloudReg">Stam</div>	
		<div id="TagCloudReg">Internet</div>	
		<div id="TagCloudSmall">Mastik</div>	
		<div id="TagCloudReg">Apple</div>
		<div id="TagCloudXLarge">Mac</div>
		<div id="TagCloudSmall">Marathon</div>	
	</div -->	
</div>
</body>
</html>